<template>
  <div>
    <el-dialog
      :title="'批量添加'"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="750px"
      @close="clearDataList()"
      top="8vh"
    >
      <el-form
        :model="dataForm"
        ref="dataForm"
        :rules="dataRule"
        @keyup.enter.native="dataFormSubmit()"
        label-width="105px"
        style="max-height: 60vh; overflow-y: auto"
      >
        <!--      <el-row style="margin: 0 0 8px 0">-->
        <!--        <el-col :span="24">-->
        <!--            <el-button @click="addItem()"  style="float: right;" icon="el-icon-plus"></el-button>-->
        <!--        </el-col>-->
        <!--      </el-row>-->
        <el-row>
          <el-col :span="12">
             <!-- prop="jjxId" -->
            <el-form-item label="奖金项名称" prop="jjxId">
              <el-select
                :clearable="true"
                v-model="dataForm.jjxId"
                @change="changeJiang(dataForm.jjxId)"
                placeholder="请选择"
                class="xiaLa"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in jjxOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖惩时间" prop="jjDate">
              <el-date-picker
                v-model="dataForm.jjDate"
                placeholder="奖惩时间"
                type="date"
                style="width: 100%"
                :picker-options="expireTimeOption"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-for="(lstData, index) in dataForm.dataList" :key="index">
          <el-row>
            <el-col :span="12">
              <el-form-item label="人员编号" prop="userCode">
                <el-input v-model="lstData.userCode" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="人员名称"
                :key="lstData.key"
                :prop="'dataList[' + index + '].userName'"
                :rules="[
                  {
                    required: true,
                    message: '人员名称不能为空',
                    trigger: 'change',
                  },
                ]"
              >
                <!--              <el-select :clearable="true" v-model="lstData.userCode" filterable placeholder="请选择" class="xiaLa" style="width:90%;">-->
                <!--                <el-option v-for="(item,index) in ryOptions " :key="index" :label="item.userName" :value="item.userCode">-->
                <!--                </el-option>-->
                <!--              </el-select>-->
                <el-input
                  v-model="lstData.userName"
                  readonly
                  @focus="changeRen(index)"
                  placeholder="请选择人员"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label-width="150px"
                label="仅输入金额"
                prop="'dataList['+index+'].sFje'"
              >
                <el-radio-group
                  v-model="lstData.sFje"
                  @change="isFou(lstData.sFje)"
                >
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label-width="150px"
                label="类型"
                prop="'dataList['+index+'].lx'"
              >
                <el-radio-group
                  v-model="lstData.lx"
                >
                  <el-radio :label="0">奖励</el-radio>
                  <el-radio :label="1">惩罚</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="奖惩金额"
                :prop="'dataList[' + index + '].jjJe'"
              >
                <el-input-number
                  v-model="lstData.jjJe"
                  :precision="2"
                  :min="0"
                  :step="100"
                  style="width: 100%"
                  @change="jeFzZh('je', lstData)"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="转换系数"
                :prop="'dataList[' + index + '].jeFzXs'"
              >
                <el-input-number
                  v-model="lstData.jeFzXs"
                  disabled
                  :precision="2"
                  :step="1"
                  :min="0"
                  @change="jeFzZh('xs', lstData)"
                  style="width: 100%"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖惩分值" prop="jjFz">
                <el-input-number
                  v-model="lstData.jjFz"
                  :disabled="lstData.sFje == 1"
                  :precision="2"
                  :step="1"
                  style="width: 100%"
                  @change="jeFzZh('fz', lstData)"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="display:flex;align-items:center;">
              <el-col :span="21">
                <el-form-item label="奖惩说明" prop="jjSm">
                  <div class="flex justifyContentSpaceBetween alignItemsCenter">
                    <el-input
                      v-model="lstData.jjSm"
                      placeholder="奖惩说明"
                      :rows="2"
                      type="textarea"
                      style="width: 90%"
                    ></el-input>
                    <div v-if="true">
                      <el-button
                        @click="removeItem(index)"
                        v-if="dataForm.dataList.length > 1"
                        icon="el-icon-minus"
                      >
                      </el-button>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <div v-if="true" class="mb10">
                  <el-button
                    @click="addItem()"
                    icon="el-icon-plus"
                    class="fr mr20"
                  ></el-button>
                </div>
              </el-col>
            </el-col>
            <!--          <el-col :span="2" align="right">-->
            <!--            <el-button @click="removeItem(index)" v-if="dataForm.dataList.length>1" icon="el-icon-minus">-->
            <!--            </el-button>-->
            <!--          </el-col>-->
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer mt20">
        <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
          >确定</el-button
        >
        <el-button type="primary" plain @click="clearDataList">取消</el-button>
      </span>
    </el-dialog>
    <personCard
      v-if="showPersonCard"
      :multiple="false"
      ref="personCardRefs"
      @getUserList="getUserCheck"
    ></personCard>
  </div>
</template>

<script>
import { saveGrjcjlbList } from "@/api/jiangjin/jiangjingrjcjlb";
import { getRyfzmxbByJjDeptId } from "@/api/jiangjin/jiangjinryfzmxb";
import { getJjDeptJjx } from "@/api/jiangjin/jiangjinjjxxxb";
import personCard from "./personCard";

export default {
  name: "batchGrjcjlb",
  components: {
    personCard,
  },
  data() {
    return {
      dataForm: {
        jjxId: "",
        jjDate: "",
        jjDeptId: "",
        dataList: [
          {
            userName: "",
            userCode: "",
            jjJe: 0,
            jjSm: "",
            jjFz: 0,
            jeFzXs: 100,
            sFje: 0,
            lx:0
          },
        ],
      },
      visible: false,
      canSubmit: false,
      ryOptions: [],
      jjxOptions: [],
      dataRule: {
        jjxId: [
          {
            required: true,
            message: "奖金项不能为空",
            trigger: "change",
          },
        ],
        jjDate: [
          {
            required: true,
            message: "奖惩时间不能为空",
            trigger: "blur",
          },
        ],
      },
      expireTimeOption: {
        disabledDate(date) {
          //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          return (
            date.getTime() <
              new Date(new Date().getFullYear(), 0, 1).getTime() ||
            date.getTime() >
              new Date(new Date().getFullYear(), 11, 31).getTime()
          );
        },
      },
      showPersonCard: false,
      clickIndex: null,
      jiangXlist: [],
      jeFzXs: 0,
      fzType: 0,
    };
  },
  methods: {
    init(deptId) {
      this.visible = true;
      this.canSubmit = true;

      this.$nextTick(() => {
        this.$set(this.dataForm, "jjDeptId", deptId);
      });

      getRyfzmxbByJjDeptId(deptId).then((res) => {
        const xData = res.data.data;
        this.ryOptions = [];
        xData.map((item) => {
          this.ryOptions.push({
            userCode: item.ryCode.toString(),
            userName: item.ryName,
          });
        });
      });

      getJjDeptJjx(deptId).then((res) => {
        this.jiangXlist = res.data.data;
        this.jjxOptions = [];
        this.jiangXlist.map((item) => {
          this.jjxOptions.push({
            value: item.id,
            label: item.jjxMc,
          });
        });
      });
    },
    getRyUserName(value) {
      let lResult = "";
      for (var i = 0; i < this.ryOptions.length; i++) {
        if (this.ryOptions[i].userCode == value) {
          lResult = this.ryOptions[i].userName;
          break;
        }
      }
      return lResult;
    },
    getJjxName(value) {
      let lResult = "";
      this.jjxOptions.find((item) => {
        if (item.value === value) {
          lResult = item.label;
        }
      });
      return lResult;
    },
    //选择奖金项
    changeJiang(jjxId) {
      const list = this.jiangXlist.filter((item) => item.id == jjxId);
      this.dataForm.dataList.forEach((item) => {
        item.jjJe = 0;
        item.jjFz = 0;
        item.jeFzXs = list[0].jeFzXs;
      });
      // if(list[0].jjFz*1>0){
      //   this.dataForm.dataList.forEach(item=>{
      //     item.jeFzXs=list[0].jjFz
      //     item.fzType=1
      //   })
      //   this.jeFzXs=list[0].jjFz
      //   this.fzType=1
      // }
      // if(list[0].jjFz*1==0&&list[0].jjJe*1>0){
      //   this.dataForm.dataList.forEach(item=>{
      //     item.jeFzXs=list[0].jjJe
      //     item.fzType=2
      //   })
      //   this.jeFzXs=list[0].jjJe
      //   this.fzType=2
      // }
      // if(list[0].jjFz*1==0&&list[0].jjJe*1==0){
      //   this.dataForm.dataList.forEach(item=>{
      //     item.jeFzXs=0
      //     item.fzType=0
      //   })
      //   this.jeFzXs=0
      //   this.fzType=0
      // }
    },
    //奖惩金额分值转换
    jeFzZh(type, data) {
      if (type == "je" && data.jeFzXs != 0 && data.sFje == 0) {
        data.jjFz = ((data.jjJe * 1) / data.jeFzXs) * 1;
      }
      if (type == "fz" && data.jeFzXs != 0 && data.sFje == 0) {
        data.jjJe = data.jjFz * data.jeFzXs * 1;
      }
      // if(type == 'je' && data.jeFzXs != 0){//奖惩金额值改变触发
      //   if(data.fzType==1){
      //     data.jjFz = data.jjJe / data.jeFzXs;
      //   }
      //   if(data.fzType==2){
      //     data.jjFz = data.jjJe*1*data.jeFzXs*1/100
      //   }
      // }else if((type == 'fz'||type == 'xs')){//分值改变触发
      //   if(data.fzType==1){
      //     data.jjJe = data.jjFz * data.jeFzXs;
      //   }
      //   if(data.fzType==2){
      //     data.jjJe= data.jjFz*1*100/data.jeFzXs*1
      //   }
      // }
    },
    addItem() {
      this.dataForm.dataList.push({
        key: Date.now(),
        userName: "",
        userCode: "",
        jjJe: 0,
        jjSm: "",
        jjFz: 0,
        jeFzXs: this.jeFzXs,
        fzType: this.fzType,
        sFje: 0,
      });
    },
    removeItem(index) {
      this.dataForm.dataList.splice(index, 1);
    },
    getDataList() {
      let lList = [];
      let ljjJe = 0;
      let ljjFz = 0;

      for (let item of this.dataForm.dataList) {
        ljjJe = 0;
        ljjFz = 0;
        ljjJe = item.jjJe;
        ljjFz = item.jjFz;

        lList.push({
          jjDeptId: this.dataForm.jjDeptId,
          jjFfzt: "未发放",
          lx: item.lx == 0 ? "奖励" : "惩罚",
          userCode: item.userCode,
          userName: item.userName,
          // userName: this.getRyUserName(item.userCode),//选择人员方式，已经赋值了
          jjxId: this.dataForm.jjxId,
          jjxName: this.getJjxName(this.dataForm.jjxId),
          jjJe: ljjJe,//Math.abs(ljjJe),
          jjFz: Math.abs(ljjFz),
          jjDate: this.dataForm.jjDate,
          jjSm: item.jjSm,
          sFje: item.sFje,
          jeFzXs: item.jeFzXs,
        });
      }
      return lList;
    },
    //选择人员
    changeRen(index) {
      var data = {
        enter: "多个个新增",
      };
      this.clickIndex = index;
      this.showPersonCard = true;
      this.$nextTick(() => {
        this.$refs.personCardRefs.init(data);
      });
    },
    //取得选择的人员信息
    getUserCheck(data) {
      if (data.length === 0) {
        this.dataForm.dataList[this.clickIndex]["userCode"] = "";
        this.dataForm.dataList[this.clickIndex]["userName"] = "";
      } else {
        const c1 = this.getStrJoin("ryXm", data);
        const c2 = this.getStrJoin("ryCode", data);
        this.dataForm.dataList[this.clickIndex]["userCode"] = c2.join(",");
        this.dataForm.dataList[this.clickIndex]["userName"] = c1.join(",");
      }
    },
    //拼接字符串
    getStrJoin(strKey, strData) {
      let lTemp = [];
      strData.map((item) => {
        lTemp.push(item[strKey]);
      });
      return lTemp;
    },
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          let dataList = [];
          dataList = this.getDataList();
          saveGrjcjlbList(dataList)
            .then((res) => {
              this.$notify.closeAll();
              this.$notify.success("添加成功");
              this.clearDataList();
              this.$emit("refreshDataList");
            })
            .catch((err) => {
              this.canSubmit = true;
            });
        }
      });
    },
    clearDataList() {
      this.dataForm = {
        jjxId: "",
        jjDate: "",
        jjDeptId: "",
        dataList: [
          {
            userCode: "",
            jjJe: 0,
            jjFz: 0,
            jjSm: "",
          },
        ],
      };
      this.visible = false;
      this.canSubmit = true;
    },
  },
};
</script>

<style scoped>
</style>
